<template>
  <div class="mx-container">
    <zz-sub-nav :list="list" :index.sync="index">
      <div class="sub-nav-content">
        <div>
          <div class="details-title">{{$t('zz.hot_menu')}}</div>
          <div class="flex-2">
            <div class="flex-2-item">
              <div class="combo-card new-user-combo">
                <div class="new-user-combo-box">
                  <span>{{$t('zz.newbie_special')}}</span>
                </div>
                <div class="combo-card-title">
                  <div>{{$t('zz.server.cdn.hotMenu.name1')}}</div>
                  <!-- <p>适合业务主要在日间的门户网站和教育类客户</p> -->
                </div>
                <div class="combo-card-body">
                  <div class="combo-card-flow">
                    {{$t('zz.server.cdn.hotMenu.gjiasu')}}<span class="red">&nbsp;&nbsp;10 TB</span>
                    <p>{{$t('zz.server.cdn.hotMenu.intro')}}</p>
                  </div>

                  <div class="suitTime">
                    <i class="iconfont icon-nc-check blue"></i> 
                    {{$t('zz.server.cdn.hotMenu.time')}}{{$t('zz.server.cdn.hotMenu.time_details')}}
                  </div>
                  <div class="combo-card-money">
                    <div class="combo-card-now-money">
                      {{511.80 | conversionPrice }}
                      <div class="unit">{{$t('zz.price')}}</div>
                    </div>
                    <s>{{$t('zz.o_price')}}：{{614.00| conversionPrice}}{{$t('zz.price')}}</s>
                  </div>
                  <div class="zz-btn btn-empty btn-blue"  @click="handleBuy()">{{$t('zz.buy_now')}}</div>
                </div>
              </div>
            </div>
            <div class="flex-2-item">
              <div class="combo-card">
                <div class="combo-card-title">
                  <div>{{$t('zz.server.cdn.hotMenu.name2')}}</div>
                  <!-- <p>适合日下行流量小于 1500 MB 的大型网站</p> -->
                </div>
                <div class="combo-card-body">
                  <div class="combo-card-flow">
                    {{$t('zz.server.cdn.hotMenu.gjiasu')}}<span class="red">&nbsp;&nbsp;100 TB</span>
                    <p>{{$t('zz.server.cdn.hotMenu.intro')}}</p>
                  </div>

                  <div class="suitTime">
                    <i class="iconfont icon-nc-check blue"></i>
                    {{$t('zz.server.cdn.hotMenu.time')}}{{$t('zz.server.cdn.hotMenu.time_details')}}
                  </div>
                  <div class="combo-card-money">
                    <div class="combo-card-now-money">
                      {{6100.80| conversionPrice}}
                      <div class="unit">{{$t('zz.price')}}</div>
                    </div>
                    <s>{{$t('zz.o_price')}}：{{7320.00| conversionPrice}}{{$t('zz.price')}}</s>
                  </div>
                  <div class="zz-btn btn-empty btn-blue" @click="handleBuy()">{{$t('zz.buy_now')}}</div>
                </div>
              </div>
            </div>
            <div class="flex-2-item">
              <div class="combo-card">
                <div class="combo-card-title">
                  <div>{{$t('zz.server.cdn.hotMenu.name3')}}</div>
                  <!-- <p>适合日下行流量小于 3 GB 的大型网站</p> -->
                </div>
                <div class="combo-card-body">
                  <div class="combo-card-flow">
                    {{$t('zz.server.cdn.hotMenu.gjiasu')}}<span class="red">&nbsp;&nbsp;500 TB</span>
                    <p>{{$t('zz.server.cdn.hotMenu.intro')}}</p>
                  </div>

                  <div class="suitTime">
                    <i class="iconfont icon-nc-check blue"></i>
                    {{$t('zz.server.cdn.hotMenu.time')}}{{$t('zz.server.cdn.hotMenu.time_details')}}
                  </div>
                  <div class="combo-card-money">
                    <div class="combo-card-now-money">
                      {{27800.80| conversionPrice}}
                      <div class="unit">{{$t('zz.price')}}</div>
                    </div>
                    <s>{{$t('zz.o_price')}}：{{33360.00| conversionPrice}}{{$t('zz.price')}}</s>
                  </div>
                  <div class="zz-btn btn-empty btn-blue" @click="handleBuy()">{{$t('zz.buy_now')}}</div>
                </div>
              </div>
            </div>
            <div class="flex-2-item">
              <div class="combo-card">
                <div class="combo-card-title">
                  <div>{{$t('zz.server.cdn.hotMenu.name4')}}</div>
                  <!-- <p>适合日下行流量小于 15 GB 的大型网站</p> -->
                </div>
                <div class="combo-card-body">
                  <div class="combo-card-flow">
                    {{$t('zz.server.cdn.hotMenu.gjiasu')}}<span class="red">&nbsp;&nbsp;1 PB</span>
                    <p>{{$t('zz.server.cdn.hotMenu.intro')}}</p>
                  </div>

                  <div class="suitTime">
                    <i class="iconfont icon-nc-check blue"></i>
                    {{$t('zz.server.cdn.hotMenu.time')}}{{$t('zz.server.cdn.hotMenu.time_details')}}
                  </div>
                  <div class="combo-card-money">
                    <div class="combo-card-now-money">
                      {{50500.80| conversionPrice}}
                      <div class="unit">{{$t('zz.price')}}</div>
                    </div>
                    <s>{{$t('zz.o_price')}}：{{60600.00| conversionPrice}}{{$t('zz.price')}}</s>
                  </div>
                  <div class="zz-btn btn-empty btn-blue" @click="handleBuy()">{{$t('zz.buy_now')}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.product_presentation')}}</div>
          <div>
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.Global_CDN')}}</span>
              <p slot="content">{{$t('zz.server.cdn.join.intro1')}}</p>
              <img
                src="@/assets/img/cdn/cdn1-1.png"
                slot="img"
                alt=""
                width="385"
              />
            </zz-card>
          </div>
          <div class="marginTop">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.server.cdn.join.title2')}}</span>
              <p slot="content">
                {{$t('zz.server.cdn.join.intro2')}}
              </p>
              <img
                src="@/assets/img/cdn/cdn1-2.png"
                slot="img"
                alt=""
                width="385"
              />
            </zz-card>
          </div>
          <div class="marginTop">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.server.cdn.join.title3')}}</span>
              <p slot="content">
                {{$t('zz.server.cdn.join.intro3')}}</p>
              <img
                src="@/assets/img/cdn/cdn1-3.png"
                slot="img"
                alt=""
                width="385"
              />
            </zz-card>
          </div>
          <div class="marginTop">
            <zz-card titleSize="small">
              <span slot="title">{{$t('zz.server.cdn.join.title4')}}</span>
              <p slot="content">
                {{$t('zz.server.cdn.join.intro4')}}</p>
              <img
                :src="$t('zz.img.cdn1-4')"
                slot="img"
                alt=""
                width="385"
              />
            </zz-card>
          </div>
        </div>
        <div>
          <div class="details-title">{{$t('zz.node_coverage')}}</div>
          <div class="fugaicard-wrap">
            <h4 class="fugaicard-title">{{$t('zz.server.cdn.node.title')}}</h4>
            <ul class="flex-2">
              <li class="flex-2-item">
                <div class="fugaicard">
                  <img
                    src="@/assets/img/cdn/cdn2-1.png"
                    style="width: 54px"
                    alt=""
                  />
                  <h5>{{$t('zz.global')}}<span class="blue">&nbsp;2000&nbsp;</span>{{$t('zz.node')}}</h5>
                </div>
              </li>
              <li class="flex-2-item">
                <div class="fugaicard">
                  <img
                    src="@/assets/img/cdn/cdn2-2.png"
                    style="width: 54px"
                    alt=""
                  />
                  <h5><span class="blue">&nbsp;20+&nbsp;</span>{{$t('zz.server.cdn.node.title1')}}</h5>
                </div>
              </li>
              <li class="flex-2-item">
                <div class="fugaicard">
                  <img
                    src="@/assets/img/cdn/cdn2-3.png"
                    style="width: 54px"
                    alt=""
                  />
                  <h5>{{$t('zz.server.cdn.node.title2')}}<span class="blue">&nbsp;80%&nbsp;</span></h5>
                </div>
              </li>
              <li class="flex-2-item">
                <div class="fugaicard">
                  <img
                    src="@/assets/img/cdn/cdn2-4.png"
                    style="width: 54px"
                    alt=""
                  />
                  <h5><span class="blue">&nbsp;100万&nbsp;</span>{{$t('zz.server.cdn.node.title3')}}</h5>
                </div>
              </li>
            </ul>
          </div>
          <img src="@/assets/img/cdn/cdn2-5.png" alt="" />
        </div>

        <div>
          <div class="details-title">{{$t('zz.core_function')}}</div>
          <div class="flex-3">
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-diqiu"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title1')}}</h5>
                <p>
                  {{$t('zz.server.cdn.node.function.intro1')}}
                </p>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-pinzhi"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title2')}}</h5>
                <p>
                  {{$t('zz.server.cdn.node.function.intro2')}}
                </p>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-md-timer"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title3')}}</h5>
                <p>
                  {{$t('zz.server.cdn.node.function.intro3')}}
                </p>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-yibiao"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title4')}}</h5>
                <p>{{$t('zz.server.cdn.node.function.intro4')}}</p>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-jifei"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title5')}}</h5>
                <p>{{$t('zz.server.cdn.node.function.intro5')}}</p>
              </div>
            </div>
            <div class="flex-3-item">
              <div class="advantage-card">
                <div>
                  <i class="iconfont icon-xieyi"></i>
                </div>
                <h5>{{$t('zz.server.cdn.node.function.title6')}}</h5>
                <p>
                  {{$t('zz.server.cdn.node.function.intro6')}}
                </p>
              </div>
            </div>
          </div>
          <!-- <img src="@/assets/img/cdn/cdn4-7.png" alt=""> -->
        </div>
        <div class="content-sub-nav-wrap">
          <div class="details-title">{{$t('zz.application_scenarios')}}</div>
          <div class="header-nav-wrapper-wrap">
            <ul class="header-nav-wrapper" style="width: 500px">
              <li
                v-for="(item, i) in list[4].child"
                :key="i"
                :class="item.index == subIndex ? 'active' : ''"
                @click="navClick(item)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div v-if="subIndex == 1">
            <img :src="$t('zz.img.cdn5-1')" slot="img" alt="" />
            <div slot="content" class="card-wrap">
              <h6 class="list-title">{{$t('zz.scence_description')}}</h6>
              <p>{{$t('zz.server.cdn.scence.des1')}}</p>
              <h6 class="list-title">{{$t('zz.business_value')}}</h6>
              <ul class="list-has-poi">
                <li>{{$t('zz.server.cdn.business.des1')}}</li>
                <li>{{$t('zz.server.cdn.business.des2')}}</li>
              </ul>
            </div>
          </div>
          <div v-if="subIndex == 2">
            <img :src="$t('zz.img.cdn5-2')" slot="img" alt="" />
            <div slot="content" class="card-wrap">
              <h6 class="list-title">{{$t('zz.scence_description')}}</h6>
              <p>{{$t('zz.server.cdn.scence.des2')}}</p>
              <h6 class="list-title">{{$t('zz.business_value')}}</h6>
              <ul class="list-has-poi">
                <li>{{$t('zz.server.cdn.business.des3')}}</li>
                <li>{{$t('zz.server.cdn.business.des4')}}</li>
                <li>{{$t('zz.server.cdn.business.des5')}}</li>
              </ul>
            </div>
          </div>
          <div v-if="subIndex == 3">
            <img :src="$t('zz.img.cdn5-3')" slot="img" alt="" />
            <div slot="content" class="card-wrap">
              <h6 class="list-title">{{$t('zz.scence_description')}}</h6>
              <p>{{$t('zz.server.cdn.scence.des3')}}</p>
              <h6 class="list-title">{{$t('zz.business_value')}}</h6>
              <ul class="list-has-poi">
                <li>{{$t('zz.server.cdn.business.des6')}}</li>
                <li>{{$t('zz.server.cdn.business.des7')}}</li>
                <li>{{$t('zz.server.cdn.business.des8')}}</li>
                <li>{{$t('zz.server.cdn.business.des9')}}</li>
              </ul>
            </div>
          </div>
          <div v-if="subIndex == 4">
            <img :src="$t('zz.img.cdn5-4')" slot="img" alt="" />
            <div slot="content" class="card-wrap">
              <h6 class="list-title">{{$t('zz.scence_description')}}</h6>
              <p>
                {{$t('zz.server.cdn.scence.des4')}}
              </p>
              <h6 class="list-title">{{$t('zz.business_value')}}</h6>
              <ul class="list-has-poi">
                <li>{{$t('zz.server.cdn.business.des10')}}</li>
              </ul>
            </div>
          </div>
          <div v-if="subIndex == 5">
            <img :src="$t('zz.img.cdn5-5')" slot="img" alt="" />
            <div slot="content" class="card-wrap">
              <h6 class="list-title">{{$t('zz.scence_description')}}</h6>
              <p>{{$t('zz.server.cdn.scence.des5')}}</p>
              <h6 class="list-title">{{$t('zz.business_value')}}</h6>
              <ul class="list-has-poi">
                <li>{{$t('zz.server.cdn.business.des11')}}</li>
               <li>{{$t('zz.server.cdn.business.des12')}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </zz-sub-nav>
  </div>
</template>

<script>
import SubNav from "@/components/SubNav/index.vue";
import ZzCard from "@/components/ZzCard";
import Bus from '@/bus.js'

export default {
  data() {
    return {
      index: 1,
      subIndex: 1,
      
    };
  },

  components: {
    "zz-sub-nav": SubNav,
    ZzCard,
  },
  props: {},
  mounted() {},
  computed: {
    activeItem: function () {
      let activeItem = this.list.find((v) => v.index == this.index);
      console.log(this.list[this.index]);
      this.subIndex = activeItem.child ? activeItem.child[0].index : 1;
      return activeItem;
    },
    list: function(){ return [
        { name: this.$t('zz.hot_menu'), index: 1 },
        { name: this.$t('zz.product_presentation'), index: 2, title: this.$t('zz.product_presentation') },
        { name: this.$t('zz.node_coverage'), index: 3 },
        {
          name: this.$t('zz.core_function'),
          index: 4,
        },
        {
          name: this.$t('zz.application_scenarios'),
          index: 5,
          child: [
            { name: this.$t('zz.server.cdn.1'), index: 1 },
            { name: this.$t('zz.server.cdn.2'), index: 2 },
            { name: this.$t('zz.server.cdn.3'), index: 3 },
            { name: this.$t('zz.server.cdn.4'), index: 4 },
            { name: this.$t('zz.server.cdn.5'), index: 5 },
          ],
        },
      ]},
  },
  watch: {},
  methods: {
    navClick(a_item) {
      console.log(a_item);
      this.subIndex = a_item.index;
    },
    handleBuy(a_it){
      Bus.$emit('serveFun', a_it)
    }
  },
  destroyed() {},
};
</script>
<style lang='scss' scoped>
@import "@/style/variables.scss";

.sub-nav-content {
  padding: 12px 48px;
  flex: 1;
  width: 100%;
  .pro-title {
    color: $color;
    font-size: 20px;
    padding: 20px 45px;
    border-bottom: 1px solid $border;
  }
  .pro-intro-wrap {
    padding: 30px 48px;
  }
  img {
    max-width: 100%;
    // margin-top: 20px;
  }
}
.son-pro-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 48px;
  & > div {
    width: 238px;
  }
}

.fugaicard-wrap {
  padding: 10px 120px 50px;
  .fugaicard-title {
    font-size: 28px;
    text-align: center;
    margin-bottom: 30px;
  }
  .fugaicard {
    box-shadow: 1px 1px 10px #ccc;
    text-align: center;
    padding: 25px 40px 25px;
    img {
      text-align: center;
      margin: 0 auto;
    }
    h5 {
      font-size: 22px;
      margin-top: 25px;
    }
  }
}
.combo-card {
  position: relative;
  box-shadow: $b 0px 0px 10px 2px;
  // border: 1px solid $border;
  &.new-user-combo{
    .new-user-combo-box{
      position: absolute;
      right: 0;
      top: 1px;
      width: 100px;
      height: 100px;
      overflow: hidden;
      span{
        display: block;
        transform: rotate(45deg) translate(29px, -13px) scale(.8);
        background-color: #f00;
        color: #fff;
        text-align: center;
      }
    }
  }
  &::before {
    content: "";
    position: absolute;
    top: 0px;
    height: 2px;
    left: 0px;
    right: 0px;
    background-color: $blue;
  }

  .combo-card-title {
    line-height: 150%;
    padding: 20px 30px;
    background-color: #fafafa;
    div {
      // font-size: 20px;
      // margin-bottom: 15px;
      color: #333;
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
    }
    p {
      height: 44px;
      margin-top: 8px;
      color: #666;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
  }
  .combo-card-body {
    padding: 20px 30px 35px;

    .combo-card-flow {
      margin-bottom: 15px;
      font-size: 16px;
      p {
        font-size: 14px;
        line-height: 150%;
      }
    }
    .suitTime {
      font-size: 16px;
    }
    .combo-card-money {
      text-align: center;
      margin: 30px 0;
      .combo-card-now-money {
        display: flex;
        font-size: 30px;
        line-height: 150%;
        justify-content: center;
        align-items: center;
        color: $yellow;
        .unit {
          font-size: 16px;
          line-height: 150%;
          margin-top: 5px;
          margin-left: 10px;
        }
      }
    }
    s {
      color: $subColor;
    }
  }
}

.advantage-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 25px 50px;
  border-right: 1px solid #ccc;
  &:last-child {
    border-right: none;
  }
  h5 {
    margin: 25px 0 10px;
    font-size: 16px;
  }
  i {
    font-size: 35px;
    color: #000;
  }
}

.small-title {
  text-align: left;
  margin-top: -35px;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .fugaicard-wrap {
    padding: 0.2rem 0.45rem;
    .fugaicard-title {
      font-size: 0.5rem;
    }
  }
  .advantage-card {
    padding: 0.4rem 25px;
  }

  .combo-card {
    .combo-card-money {
      margin: 0.3rem 0;
    }
  }
}
</style>